<template>
  <el-card class="user-setting-container">
    <el-tabs v-model="switchTabSet" class="switch-tabs" @tab-click="switchOptions">
      <el-tab-pane label="个人设置" name="personalSet">
        <el-form label-width="85px" label-position="left">
          <el-form-item label="头像">
            <el-avatar src=""></el-avatar>
            <el-button type="primary" plain>更改头像</el-button>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input>
              <template #suffix>
                <img src="/img/user-account-images/edit_pen_icon.png" alt="edit_pen_icon" @click="changeContactDetail('昵称')">
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input>
              <template #suffix>
                <img src="/img/user-account-images/edit_pen_icon.png" alt="edit_pen_icon" @click="changeContactDetail('账号')">
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <div></div>
            <el-button type="primary" plain @click="passwordDialog=true">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="Token对接" name="token">
        <el-form label-width="70px" label-position="left">
          <el-form-item label="Token">
            <el-input placeholder="请填写您的Token" label-width="60px" class="token-input"></el-input>
            <el-button type="primary" class="reset-button" plain>重置</el-button>
          </el-form-item>
        </el-form>
        <div class="token-attention">注：请到域名检测（<span>www.urlzt.com</span>） 内获取Token。</div>
      </el-tab-pane>
      <el-tab-pane label="接受通知账户设置" name="noticeSet">
        <div class="notice-btn-box">
          <el-button v-for="name in noticeData.btnTextList" :key="name" :class="noticeData.activeName === name ? 'btn-active':''" round size="mini" @click="switchNotice(name)">
            {{ name }}
          </el-button>
        </div>
        <div class="notice-set-header">
          <h3>报警{{ noticeData.activeName }}</h3>
          <el-button type="primary" size="small" @click="noticeData.noticeDialog = true;noticeData.dialogTitle='添加'">
            添加{{ noticeData.activeName }}
          </el-button>
        </div>
        <el-alert title="提醒" type="warning" show-icon>
          <template #default>
            <div v-show="noticeData.activeName === '手机'">
              短信提醒到达率为99%，费用为：0.1元/条；电话提醒到达率为90%。费用为：0.2元/通。该2种方式可能会被运行商或手机拦截，且未通知到也会直接扣费。
            </div>
            <div v-show="noticeData.activeName === '邮箱'">
              添加邮箱报警前必须将<el-tag type="primary" size="mini">baojing@urlzt.com</el-tag>添加白名单才能收到信息，
              <el-link type="primary">如何设置邮件白名单？</el-link>
            </div>
            <div v-show="noticeData.activeName === '企业微信'">
              添加企业微信通知前需要先配置企业微信机器人，配置教程：<el-link type="primary">点击前往</el-link>
            </div>
            <div v-show="noticeData.activeName === '钉钉'">
              添加钉钉通知前需要先配置钉钉机器人，配置教程：<el-link type="primary">点击前往</el-link>
            </div>
            <div v-show="noticeData.activeName === '飞书'">
              添加飞书通知前需要先配置飞书机器人，配置教程：<el-link type="primary">点击前往</el-link>
            </div>
          </template>
        </el-alert>
        <el-table :data="noticeData.noticeTableData.data" v-loading="noticeData.showLoading">
          <el-table-column v-if="noticeData.activeName === '手机'" prop="phone" label="手机">
          </el-table-column>
          <el-table-column v-if="noticeData.activeName === '邮箱'" prop="email" label="邮箱">
          </el-table-column>
          <el-table-column v-if="['企业微信','钉钉','飞书'].includes(noticeData.activeName)" prop="name" label="机器人名称">
          </el-table-column>
          <el-table-column v-if="['企业微信','钉钉','飞书'].includes(noticeData.activeName)" prop="webhook" label="webhook">
          </el-table-column>
          <el-table-column v-if="['企业微信','钉钉'].includes(noticeData.activeName)" prop="isAtAll" label="是否通知全体">
            <template #default="scope">
              <el-switch v-model="scope.row.isAtAll" :loading="scope.row.switching" :before-change="()=>noticeAll(scope.row)" :active-value="1" :inactive-value="0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="operate-btn">
                <img src="/img/table-operate-images/edit_icon.png" alt="edit_icon" @click="openEditDialog(scope.row)">
                <img src="/img/table-operate-images/delete_icon.png" alt="delete_icon" @click="deleteNotice(scope.row.id)">
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="noticeData.queryForm.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="noticeData.queryForm.per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="noticeData.noticeTableData.total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="发送通知账户设置" name="sendNoticeSet">
        <div class="notice-btn-box">
          <el-button size="mini" round :class="sendNoticeData.activeBtn === 'message' ? 'btn-active' : ''" @click="switchSend('message')">短信</el-button>
          <el-button size="mini" round :class="sendNoticeData.activeBtn === 'email' ? 'btn-active' : ''" @click="switchSend('email')">邮箱</el-button>
        </div>
        <el-table class="send-message-table" :data="sendNoticeData.sendTableData" v-loading="sendNoticeData.tableLoading" v-if="sendNoticeData.activeBtn === 'message'">
          <el-table-column prop="secretId" label="secretId">
          </el-table-column>
          <el-table-column prop="secretKey" label="secretKey">
          </el-table-column>
          <el-table-column prop="SmsSdkAppid" label="SmsSdkAppid">
          </el-table-column>
          <el-table-column prop="Sign" label="Sign">
          </el-table-column>
          <el-table-column prop="TemplateID" label="TemplateID">
          </el-table-column>
          <el-table-column prop="SenderId" label="SenderId">
          </el-table-column>
          <el-table-column prop="region" label="region">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <img src="/img/table-operate-images/edit_icon.png" alt="edit_icon" @click="openEditSendDialog(scope.row)">
            </template>
          </el-table-column>
        </el-table>
        <el-form
          class="send-notice-form"
          ref="sendNoticeFormRef"
          :model="sendNoticeData.sendEmailForm"
          :rules="sendNoticeData.sendNoticeFormRules"
          label-position="left"
          label-width="120px"
          v-if="sendNoticeData.activeBtn === 'email'"
        >
          <el-form-item label="Host" prop="Host">
            <el-input v-model.trim="sendNoticeData.sendEmailForm.Host" placeholder="请输入发送邮件服务器"></el-input>
          </el-form-item>
          <el-form-item label="Port" prop="Port">
            <el-input v-model="sendNoticeData.sendEmailForm.Port" placeholder="请输入端口号" maxlength="5"></el-input>
          </el-form-item>
          <el-form-item label="FromName" prop="FromName">
            <el-input v-model.trim="sendNoticeData.sendEmailForm.FromName" placeholder="请输入发件人名称"></el-input>
          </el-form-item>
          <el-form-item label="Username" prop="Username">
            <el-input v-model.trim="sendNoticeData.sendEmailForm.Username" placeholder="请输入发件人邮箱"></el-input>
          </el-form-item>
          <el-form-item label="Password" prop="Password">
            <el-input v-model.trim="sendNoticeData.sendEmailForm.Password" placeholder="请输入授权码"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" @click="saveSendNotice">保存</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
  <el-dialog v-model="sendNoticeData.sendMessageDialog" title="编辑短信通知">
    <el-form
      class="send-notice-form"
      ref="sendNoticeFormRef"
      :model="sendNoticeData.sendMessageForm"
      :rules="sendNoticeData.sendNoticeFormRules"
      label-position="left"
      label-width="120px"
    >
      <el-form-item label="secretId" prop="secretId">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.secretId" placeholder="请输入secretId"></el-input>
      </el-form-item>
      <el-form-item label="secretKey" prop="secretKey">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.secretKey" placeholder="请输入secretKey"></el-input>
      </el-form-item>
      <el-form-item label="SmsSdkAppid" prop="SmsSdkAppid">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.SmsSdkAppid" placeholder="请输入SmsSdkAppid"></el-input>
      </el-form-item>
      <el-form-item label="Sign" prop="Sign">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.Sign" placeholder="请输入Sign"></el-input>
      </el-form-item>
      <el-form-item label="TemplateID" prop="TemplateID">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.TemplateID" placeholder="请输入TemplateID"></el-input>
      </el-form-item>
      <el-form-item label="ExtendCode" prop="ExtendCode">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.ExtendCode" placeholder="请输入ExtendCode"></el-input>
      </el-form-item>
      <el-form-item label="SenderId" prop="SenderId">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.SenderId" placeholder="请输入SenderId"></el-input>
      </el-form-item>
      <el-form-item label="region" prop="region">
        <el-input v-model.trim="sendNoticeData.sendMessageForm.region" placeholder="请输入region"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini">取消</el-button>
      <el-button type="primary" size="mini" @click="saveSendNotice">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog title="修改密码" v-model="passwordDialog" width="500px" @close="closeDialog('passwordFormRef')">
    <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-position="top">
      <el-form-item label="当前密码" prop="password">
        <el-input minlength="6" maxlength="12" type="password" v-model.trim="passwordForm.password" placeholder="请输入当前密码"></el-input>
      </el-form-item>
      <el-form-item label="新的密码" prop="newpassword">
        <el-input minlength="6" maxlength="12" v-model.trim="passwordForm.newpassword" placeholder="请输入新的密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" plain @click="passwordDialog = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="changingPassword" @click="changePassword">修改</el-button>
    </template>
  </el-dialog>

  <el-dialog :title="noticeData.dialogTitle+noticeData.activeName" v-model="noticeData.noticeDialog" width="500px" custom-class="notice-dialog" @closed="closeDialog('noticeFormRef')">
    <el-form ref="noticeFormRef" :model="noticeData.noticeForm" label-position="left" label-width="95px">
      <div v-if="['手机','邮箱'].includes(noticeData.activeName)" class="form-item-box">
        <el-form-item
          v-for="(item,index) in noticeData.activeName === '手机' ? noticeData.noticeForm.phoneList : noticeData.noticeForm.emailList"
          :key="item"
          :label="noticeData.noticeForm.phoneList.length > 1 ? noticeData.activeName+(index+1) : noticeData.activeName"
          :prop="noticeData.activeName === '手机' ? `phoneList[${index}].phone` : `emailList[${index}].email`"
          :rules="[
              { required: true, message: '请输入'+noticeData.activeName },
              { validator: checkPhoneOrEmail, message: '输入的格式不正确' }
            ]"
        >
          <div class="notice-input">
            <el-input v-if="noticeData.activeName === '手机'" v-model.trim="item.phone" maxlength="11" :placeholder="'请输入'+noticeData.activeName" clearable></el-input>
            <el-input v-else v-model.trim="item.email" :placeholder="'请输入'+noticeData.activeName" clearable></el-input>
            <el-button v-if="noticeData.activeName === '手机' ? noticeData.noticeForm.phoneList.length > 1 : noticeData.noticeForm.emailList.length > 1" class="remove-btn" type="danger" icon="el-icon-minus" circle @click="removeInput(item,noticeData.activeName === '手机' ? noticeData.noticeForm.phoneList : noticeData.noticeForm.emailList)"></el-button>
          </div>
        </el-form-item>
        <div class="continue-adding" v-if="noticeData.dialogTitle === '添加'" @click="addInput">
          <i class="el-icon-plus"></i>继续添加
        </div>
      </div>
      <el-form-item v-if="['企业微信','钉钉','飞书'].includes(noticeData.activeName)" label="机器人名称" prop="name" :rules="[{ required: true, message: '请输入机器人名称'}]">
        <el-input v-model.trim="noticeData.noticeForm.name" placeholder="请输入机器人名称"></el-input>
      </el-form-item>
      <el-form-item v-if="noticeData.activeName === '钉钉'" label="secret" prop="secret"
                    :rules="[
                      { required: true, message: '请输入secret' },
                      { min: 67,max: 67, message: '请输入正确的secret签名' }
                    ]">
        <el-input v-model.trim="noticeData.noticeForm.secret" maxlength="67" placeholder="请输入secret"></el-input>
      </el-form-item>
      <el-form-item v-if="['企业微信','钉钉','飞书'].includes(noticeData.activeName)" label="webhook" prop="webhook" :rules="[{ required: true, message: '请输入webhook' }]">
        <el-input v-model.trim="noticeData.noticeForm.webhook" placeholder="请输入webhook"></el-input>
      </el-form-item>
      <el-form-item v-if="['企业微信','钉钉'].includes(noticeData.activeName)" label="通知全体">
        <el-switch v-model="noticeData.noticeForm.isAtAll" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" plain @click="noticeData.noticeDialog = false">取消</el-button>
      <el-button type="primary" size="mini" @click="submitNotice" :loading="noticeData.submitting">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, getCurrentInstance, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { userEdit, noticeSetList, addNotice, delNotice, editNotice, editIsAtAll, sendMessageIndex, taskMailIndex, sendMessageSave, taskMailSave } from '@/axios/userRequest'
import validateF from '@/utils/validate'
const router = useRouter()
const { proxy } = getCurrentInstance()

// 切换设置
const switchTabSet = ref(['personalSet', 'token', 'noticeSet', 'sendNoticeSet'].includes(localStorage.switchTabSet) ? localStorage.switchTabSet : 'personalSet')
const switchOptions = tab=>{
  localStorage.setItem('switchTabSet',tab.props.name)
  tab.props.name === 'noticeSet' ? getNoticeList(): ''
  tab.props.name === 'sendNoticeSet' ? switchSend(sendNoticeData.activeBtn) : ''
}
// 修改密码对话框数据
const passwordData = reactive({
  // 修改密码对话框
  passwordDialog: false,
  // 正在修改密码
  changingPassword:false,
  // 修改密码表单数据
  passwordForm: {
    action: 'password',
    password: '',
    newpassword: '',
  }
})

let { passwordDialog, changingPassword, passwordForm } = toRefs(passwordData)

const { checkPassword, checkPassword2 } = validateF(passwordData.passwordForm)
// 修改密码表单验证规则
const passwordRules = {
  password: [{ required:true, message: '密码不能为空' }],
  newpassword:[
    { required: true,validator: checkPassword },
    { validator: checkPassword2 }
  ]
}
// 修改密码
const changePassword = () => {
  proxy.$refs.passwordFormRef.validate(async valid => {
    if (valid) {
      passwordData.changingPassword = true
      const res = await userEdit(passwordData.passwordForm)
      if(res.code === 0){
        proxy.$message.success(`${res.msg},正在回到登录页`)
        setTimeout(() => router.push('/user-center/logout'), 1500)
      }else{
        passwordData.changingPassword = false
        proxy.$message.error(res.msg)
      }
    }
  })
}
// 通知设置数据
let noticeFormData = {
  phoneList:[{ phone: '' }],
  emailList:[{ email:'' }],
  name:'',
  webhook:'',
  isAtAll: 0,
  secret:'',
}
const noticeData = reactive({
  noticeDialog: false,
  dialogTitle: '添加',
  btnTextList: ['邮箱', '手机', '钉钉', '企业微信', '飞书'],
  activeName: ['邮箱', '手机', '钉钉', '企业微信', '飞书'].includes(localStorage.activeName) ? localStorage.activeName : '手机',
  showLoading: true,
  noticeTableData: [],
  submitting: false,
  queryForm:{
    type:'',
    page:1,
    per_page:5,
  },
  noticeForm: Object.assign({},noticeFormData)
})
// 校验手机和邮箱
const { checkPhoneOrEmail } = validateF()
// 获取通知列表
const getNoticeList = async ()=>{
  noticeData.showLoading = true
  noticeData.queryForm.type = noticeData.activeName
  const res = await noticeSetList(noticeData.queryForm)
  res.code === 0 ? noticeData.noticeTableData = res.data : proxy.$message.error(res.msg)
  noticeData.showLoading = false
}
// 添加通知方式
const newNotification = data =>{
  addNotice({
    type: noticeData.activeName,
    ...data
  }).then(res => {
    if(res.code === 0) {
      proxy.$message.success(res.msg)
      noticeData.noticeDialog = false
      getNoticeList()
    }else{
      proxy.$message.error(res.msg)
    }
  }).catch(err=>{})
}
// 编辑通知方式
const openEditDialog = row=>{
  noticeData.dialogTitle = '编辑'
  noticeData.noticeDialog = true
  noticeData.noticeForm.type = row.type
  noticeData.noticeForm.id = row.id
  switch (row.type){
    case '手机':
      noticeData.noticeForm.phoneList[0].phone = row.phone
      break
    case '邮箱':
      noticeData.noticeForm.emailList[0].email = row.email
      break
    case '钉钉':
      noticeData.noticeForm.name = row.name
      noticeData.noticeForm.secret = row.secret
      noticeData.noticeForm.webhook = row.webhook
      break
    default:
      noticeData.noticeForm.name = row.name
      noticeData.noticeForm.webhook = row.webhook
      break
  }
}
// 提交
const submitNotice = ()=>{
  proxy.$refs.noticeFormRef.validate(valid=>{
    if(valid){
      noticeData.submitting = true
      if(noticeData.dialogTitle === '添加'){
        switch (noticeData.activeName){
          case '手机':
            newNotification({ phone: noticeData.noticeForm.phoneList.map(item => item.phone) })
            break
          case '邮箱':
            newNotification({ email: noticeData.noticeForm.emailList.map(item => item.email) })
            break
          default:
            newNotification(noticeData.noticeForm)
            break
        }
      }else if(noticeData.dialogTitle === '编辑'){
        noticeData.noticeForm.phone = noticeData.noticeForm.phoneList[0].phone
        noticeData.noticeForm.email = noticeData.noticeForm.emailList[0].email
        editNotice(noticeData.noticeForm).then(res=>{
          if(res.code === 0){
            proxy.$message.success(res.msg)
            noticeData.noticeDialog = false
            getNoticeList()
          }else{
            noticeData.submitting = false
            proxy.$message.error(res.msg)
          }
        }).catch(err=>{})
      }
    }
  })
}
// 删除通知方式
const deleteNotice = id=>{
  proxy.$confirm('是否删除该通知方式？','删除',{
    closeOnClickModal: false,
    customClass: 'commonMessageBox',
    type: 'warning',
  }).then(async ()=>{
    const res = await delNotice({ type:noticeData.activeName, id })
    if(res.code === 0) {
      proxy.$message.success(res.msg)
      await getNoticeList()
    }else{
      proxy.$message.error(res.msg)
    }
  }).catch(err=>{})
}
// 全体通知开关状态切换
const noticeAll = row=>{
  return new Promise(((resolve, reject) => {
    row.switching = true
    let isAtAll = row.isAtAll ? 0 : 1
    editIsAtAll({ id:row.id, isAtAll }).then(res=>{
      if(res.code === 0){
        isAtAll ? proxy.$message.success('开启成功') : proxy.$message.success('关闭成功')
        resolve(true)
      }else{
        proxy.$message.error(res.msg)
        reject(false)
      }
      row.switching = false
    }).catch(err=>{})
  }))
}
// 切换每页显示数量
const handleSizeChange = val =>{
  noticeData.queryForm.page = 1
  noticeData.queryForm.per_page = val
  getNoticeList()
}
// 切换页码
const handleCurrentChange = val =>{
  noticeData.queryForm.page = val
  getNoticeList()
}
// 切换账户通知方式
const switchNotice = name =>{
  noticeData.activeName = name
  noticeData.queryForm.page = 1
  localStorage.setItem('activeName', noticeData.activeName)
  getNoticeList()
}
// 添加输入框
const addInput = ()=>{
  noticeData.activeName === '手机' ? noticeData.noticeForm.phoneList.push({ phone:'' }) : noticeData.noticeForm.emailList.push({ email:'' })
}
// 移除输入框
const removeInput = (item,list) =>{
  let index = list.indexOf(item)
  if(list.length > 1){
    index !== -1 ? list.splice(index, 1) : ''
  }
}
// 关闭对话框时重置表单
const closeDialog = refName=>{
  if(refName === 'noticeFormRef'){
    // 重置表单内容
    noticeData.noticeForm = Object.assign({},noticeFormData)
    noticeData.submitting = false
  }else if(refName === 'passwordFormRef'){
    passwordData.changingPassword = false
  }
  proxy.$refs[refName].resetFields()
}
// 发送通知账户数据
const { checkEmail } = validateF()
const sendNoticeData = reactive({
  sendMessageForm:{},
  sendEmailForm:{},
  activeBtn: 'message',
  sendMessageDialog: false,
  sendTableData: [],
  tableLoading: false,
  sendNoticeFormRules:{
    secretId:[{ required:true, message:'请输入secretId' }],
    secretKey:[{ required:true, message:'请输入secretKey' }],
    SmsSdkAppid:[{ required:true, message:'请输入SmsSdkAppid' }],
    Sign:[{ required:true, message:'请输入Sign' }],
    TemplateID:[{ required:true, message:'请输入TemplateID' }],
    region:[{ required:true, message:'请输入region' }],
    Host:[{ required:true, message:'请输入发送邮件服务器' }],
    Port:[{ required:true, message: '请输入端口号' },],
    FromName:[{ required:true, message:'请输入发件人名称' }],
    Username:[
      { required:true, message:'请输入发件人邮箱' },
      { validator: checkEmail }
    ],
    Password:[{ required:true, message:'请输入授权码' }],
  }
})
// 切换发送通知
const switchSend = type=>{
  sendNoticeData.activeBtn = type
  let sendApi = type === 'email' ? taskMailIndex : sendMessageIndex
  sendApi().then(res=>{
    if(res.code === 0){
      type === 'email' ? sendNoticeData.sendEmailForm = res.data[0] : sendNoticeData.sendTableData = res.data
    }else{
      proxy.$message.error(res.msg)
    }
  }).catch(err=>{})
}
// 打开编辑发送短信通知
const openEditSendDialog = row=>{
  sendNoticeData.sendMessageDialog = true
  sendNoticeData.sendMessageForm = row
}
// 保存发送通知
const saveSendNotice = ()=>{
  proxy.$refs.sendNoticeFormRef.validate(validate=>{
    if(validate){
      if(sendNoticeData.activeBtn === 'email'){
        sendNoticeData.sendEmailForm.From1 = sendNoticeData.sendEmailForm.Username
        taskMailSave({ ...sendNoticeData.sendEmailForm }).then(res=>{
          res.code === 0 ? proxy.$message.success(res.msg) : proxy.$message.error(res.msg)
        }).catch(err=>{})
      }else{
        sendMessageSave({ ...sendNoticeData.sendMessageForm }).then(res=>{
          if(res.code === 0){
            proxy.$message.success(res.msg)
            sendNoticeData.sendMessageDialog = false
          } else{
            proxy.$message.error(res.msg)
          }
        }).catch(err=>{})
      }
    }
  })
}
localStorage.switchTabSet === 'noticeSet' ? getNoticeList(): ''
localStorage.switchTabSet === 'sendNoticeSet' ? switchSend(sendNoticeData.activeBtn) : ''
</script>

<style lang="less" scoped>
.user-setting-container {
  border-radius: 52px 12px 12px 12px;
  &:deep(.el-card__body){
    padding-top: 40px;
    padding-left: 32px;
    .switch-tabs{
      .el-tabs__header {
        .el-tabs__nav-wrap {
          &::after {
            height: 1px;
            background-color: #F3F5FA;
            margin-top: 15px;
            display: inline-block;
          }

          .el-tabs__item {
            font-size: 18px;
            margin-bottom: 15px;
          }
        }
      }
      .el-tabs__content{
        .token-input{
          width:40%;
          margin-right:30px;
        }
        .reset-button{
          width:100px;
          height:40px;
          font-weight: 600;
        }
        .token-attention{
          color:@subtitle;
          font-size: 14px;
          span{
            color:@primary;
          }
        }
        #pane-personalSet{
          width: 864px;
          .el-form{
            width: 748px;
            .el-form-item{
              .el-form-item__label{
                display: flex;
                align-items: center;
              }
              .el-form-item__content{
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: @secondary;
                .el-avatar{
                  width: 80px;
                  height: 80px;
                }
                .el-input{
                  .el-input__inner{
                    padding-right: 44px;
                  }
                  .el-input__suffix{
                    width: 44px;
                    background-color: #F3F5FA;
                    top: 1px;
                    right: 1px;
                    cursor: pointer;
                    height: calc(100% - 2px);
                    border-radius: 4px;
                    .el-input__suffix-inner{
                      display: inline-flex;
                    }
                  }
                }
                .el-button{
                  width: 100px;
                  height: 40px;
                  border-radius: 2px;
                }
                .el-button--primary{
                  color: @primary;
                  background-color: #FFFFFF;
                  border-color: @border-info;
                  &:hover{
                    border-color: @primary;
                  }
                }
              }
            }
          }
        }
        #pane-token{
          .el-form{
            margin-top: 20px;
            .el-form-item{
              font-weight: 600;
            }
          }
        }
        #pane-noticeSet{
          .notice-set-header{
            display: flex;
            justify-content: space-between;
            h3{
              font-size: 18px;
              color: @subtitle;
            }
          }
          .el-alert{
            .el-alert__content{
              .el-alert__description{
                div{
                  display: flex;
                  align-items: center;
                  .el-tag,
                  .el-link--primary{
                    font-size: 12px;
                    color: @primary-active;
                  }
                  .el-tag{
                    margin: 0 5px;
                  }
                }
              }
            }
          }
          .el-alert,
          .el-table,
          .notice-set-header,
          .el-pagination{
            margin-top: 20px;
            max-width: 1140px;
          }
          .el-table{
            .operate-btn{
              display: flex;
              align-items: center;
              img{
                margin-right: 20px;
                cursor: pointer;
              }
            }
          }
        }
        #pane-sendNoticeSet{
          .send-message-table{
            margin-top: 25px;
            max-width: 1140px;
          }
          .send-notice-form{
            max-width: 570px;
            margin-top: 35px;
          }
          .el-button{
            width: 100px;
          }
        }
        .notice-btn-box{
          display: flex;
          align-items: center;
          margin-top: 20px;
          .el-button{
            width: 100px;
            border: 1px solid @border-info;
            color: @secondary;
            font-size: 16px;
            transition: unset;
            &:not(:nth-last-of-type(1)){
              margin-right: 15px;
            }
            &:hover{
              background-color: @primary-plain;
              color: @primary;
            }
          }
          .btn-active{
            background-color: @primary-plain;
            color: @primary;
            border: none;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.notice-dialog{
  .el-form{
    .el-form-item{
      .notice-input{
        display: flex;
        align-items: center;
      }
    }
    .form-item-box{
      .el-form-item{
        .el-form-item__label{
          width: 60px!important;
        }
      }
    }
  }
}
</style>
